//第七页开始
(function (){
	var chartOption = {
		pie: {
			title: {
				show: false,
				text: "人流热力图"
			},
			tooltip: {
				show: true
			},
			color: ["#8425d2", "#9e3a97", "#2e31be", "#1d9653"],
			legend: {
				show: false
			},
			series: [{
				type: "pie",
				// hoverAnimation: false,
				center: ["52%", "50%"],
				radius: [0, "70%"],
				slient: true,
				startAngle: "360",
				label: {
					normal: {
						show: true,
						formatter: [
							"{b|{b}：}{c|{c}}{people|人} "
						].join('\n'),
						backgroundColor: "rgba(83,79,115,0.5)",
						borderWidth: 1,
						borderRadius: 4,
						padding: [10, 15],
						rich: {
							b: {
								color: "#fff",
								fontSize: getSize("labelTitle")
							},
							c: {
								color: "#fff",
								fontSize: getSize("labelTitle")
							},
							people: {
								color: "#fff",
								fontSize: getSize("labelTitle")
							}
						}
					},
					emphasis: {
						show: true
					}
				},
				labelLine: {
					normal: {
						show: true
					},
					emphasis: {
						show: true
					}
				},
				data: [{
						value: 2333,
						name: "大厅"
					},
					{
						value: 100,
						name: "三楼"
					},
					{
						value: 200,
						name: "四楼"
					},
					{
						value: 400,
						name: "六楼"
					}
				]
			}]
		},
		line: {
			title: {
				show: false
			},
			tooltip: {
				show: true,
				trigger: "axis"
			},
			legend: {
				show: true,
				left: "7%",
				top: "3%",
				itemWidth: getSize("legendItemWidth"),
				itemHeight: getSize("legendItemHeight"),
				textStyle: {
					fontSize: getSize("legend")
				},
				data: [{
						name: "大厅",
						textStyle: {
							color: "#16fb97"
						}
					},
					{
						name: "三楼",
						textStyle: {
							color: "#6d18f9"
						}
					},
					{
						name: "四楼",
						textStyle: {
							color: "#aac9f5"
						}
					},
					{
						name: "六楼",
						textStyle: {
							color: "#de4a74"
						}
					}
				]

			},
			color: ["#16fb97", "#6d18f9", "#aac9f5", "#de4a74"],
			grid: {
				left: getSize("grid_l"),
				right: getSize("grid_r"),
				top: getSize("grid_t"),
				bottom: getSize("grid_b")
			},
			xAxis: [{
				type: "category",
				boundaryGap: false,
				axisLabel: {
					interval:0,
					color: "#fff",
					fontFamily: "",
					fontSize: getSize("xAxisLabel")
				},
				axisLine: {
					lineStyle: {
						color: "#498bfa"
					}
				},
				axisTick: {
					alignWithLabel: true,
					lineStyle: {
						color: "#1d40ab"
					}
				}
			}],
			yAxis: [{
				type: "value",
				axisLabel: {
					color: "#fff",
					fontFamily: "",
					fontSize: getSize("xAxisLabel")
				},
				axisLine: {
					lineStyle: {
						color: "#498bfa"
					}
				},
				axisTick: {
					alignWithLabel: true,
					lineStyle: {
						color: "#1d40ab"
					}
				},
				splitLine: {
					lineStyle: {
						color: "#1a3aad"
					}
				}
			}],
			series: []
		}
	};

	 var $pages = null,
    	currentPage = null,
    	pieChartArr = [],
    	pieChart = null,
    	lineChartArr = [],
    	lineChart = null;

	function setPie() {
		pieChart.clear();
		pieChart.setOption($.extend(true, {}, chartOption.pie));
	}
	
	var types = ["day", "week", "year"];
	var interval = null;
	var currentType = types[0];

	function setDom(order) {
		if (!$pages) {
    		$pages = $("[data-page='venue']");
    		addEvent();
		    $pages.each(function () {
		    	var $this = $(this);
		    	pieChartArr.push(echarts.init($("#statisticsVenuechart", $this).get(0)));
		    	lineChartArr.push(echarts.init($("#ywdStatisticsChart", $this).get(0)));
		    });
    	}

    	switch (order) {
    		case "first":
    			currentPage = $pages.first();
    			pieChart = pieChartArr[0];
    			lineChart = lineChartArr[0];
    			break;
    		case "last":
    			currentPage = $pages.last();
    			pieChart = pieChartArr[1];
    			lineChart = lineChartArr[1];
    			break;
    	}
	}

	// 添加click事件，手动触发年周日切换
	function addEvent() {
		$pages.find("[data-chart]").on("click", function() {
			var $this = $(this);
			if($this.is(".active")) return;

			currentType = $this.attr("data-chart");
			changeBtnState($this);
			setLine(currentType);
			setMyInterval();
		});
	}	

	// 更换按钮状态
	function changeBtnState(btn) {
		btn.siblings(".active").removeClass("active");
		btn.addClass("active");
	}

	// 添加定时器，轮播年周日图表
	function setMyInterval() {
		if(interval != null) {
			clearInterval(interval);
			interval = null;
		}
		interval = setInterval(function() {
			var index = $.inArray(currentType, types);
			if(index < types.length - 1) {
				currentType = types[++index]
			} else {
				currentType = types[0];
			}
			changeBtnState($("[data-chart='" + currentType + "']", currentPage));
			setLine(currentType);
		}, 5000);
	}

	// 设置年周日图表
	function setLine(type, option) {
		lineChart.clear();
		switch(type) {
			case "day":
				option = $.extend(true, {}, chartOption.line, option || {
					xAxis: [{
						data: ["9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"]
					}],
					series: [{
							name: "大厅",
							type: "line",
							smooth: true,
							data: [10120, 10000, 65000, 25000, 25000, 40000, 30000, 60000, 30000],
							stack: "总人数"
						},
						{
							name: "三楼",
							type: "line",
							smooth: true,
							data: [8000, 5600, 7600, 3300, 5400, 3300, 3333, 5555, 3000],
							stack: "总人数"
						},
						{
							name: "四楼",
							type: "line",
							smooth: true,
							data: [1500, 2000, 4000, 3000, 2000, 6000, 3588, 2366, 3000],
							stack: "总人数"
						},
						{
							name: "六楼",
							type: "line",
							smooth: true,
							data: [10120, 1000, 55000, 2500, 25000, 40000, 0, 0, 3000],
							stack: "总人数"
						}
					]
				});
				break;
			case "week":
				option = $.extend(true, {}, chartOption.line, option || {
					xAxis: [{
						data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
					}],
					series: [{
							name: "大厅",
							type: "line",
							smooth: true,
							data: [10120, 10000, 65000, 25000, 25000, 40000, 30000, 60000, 30000],
							stack: "总人数"
						},
						{
							name: "三楼",
							type: "line",
							smooth: true,
							data: [8000, 5600, 7600, 3300, 5400, 3300, 3333, 5555, 3000],
							stack: "总人数"
						},
						{
							name: "四楼",
							type: "line",
							smooth: true,
							data: [1500, 2000, 4000, 3000, 2000, 6000, 3588, 2366, 3000],
							stack: "总人数"
						},
						{
							name: "六楼",
							type: "line",
							smooth: true,
							data: [10120, 1000, 55000, 2500, 25000, 40000, 0, 0, 3000],
							stack: "总人数"
						}
					]
				});
				break;
			case "year":
				option = $.extend(true, {}, chartOption.line, option || {
					xAxis: [{
						data: ["2011", "2012", "2013", "2014", "2015", "2016", "2017"]
					}],
					series: [{
							name: "大厅",
							type: "line",
							smooth: true,
							data: [10120, 10000, 65000, 25000, 25000, 40000, 30000, 60000, 30000],
							stack: "总人数"
						},
						{
							name: "三楼",
							type: "line",
							smooth: true,
							data: [8000, 5600, 7600, 3300, 5400, 3300, 3333, 5555, 3000],
							stack: "总人数"
						},
						{
							name: "四楼",
							type: "line",
							smooth: true,
							data: [1500, 2000, 4000, 3000, 2000, 6000, 3588, 2366, 3000],
							stack: "总人数"
						},
						{
							name: "六楼",
							type: "line",
							smooth: true,
							data: [10120, 1000, 55000, 2500, 25000, 40000, 0, 0, 3000],
							stack: "总人数"
						}
					]
				});
				break;
		}

		lineChart.setOption(option);
	}

	var timeout = null;
	function _resize() {
		if(!timeout) {
			clearTimeout(timeout);
			timeout = null;
		};
		timeout = setTimeout(setChartSize, 300);
	}

	function setChartSize() {
		if (lineChart) {
			lineChart.resize();
			var o = {
				xAxis: [{
					axisLabel: {
						fontSize: getSize("xAxisLabel")
					}
				}],
				yAxis: [{
					axisLabel: {
						fontSize: getSize("yAxisLabel")
					}
				}],
				grid: {
					left: getSize("grid_l"),
					right: getSize("grid_r"),
					top: getSize("grid_t"),
					bottom: getSize("grid_b")
				},
				legend: {
					itemWidth: getSize("legendItemWidth"),
					itemHeight: getSize("legendItemHeight"),
					textStyle: {
						fontSize: getSize("legend")
					}
				}
			};
			$.extend(true, chartOption.line, o);
			lineChart.setOption(o);
		}

		if (pieChart) {
			var o1 = {
				series: [{
					label: {
						normal: {
							rich: {
								b: {
									fontSize: getSize("labelTitle")
								},
								c: {
									fontSize: getSize("labelTitle")
								},
								people: {
									fontSize: getSize("labelTitle")
								}
							}
						}
					}
				}]
			}
			$.extend(true, chartOption.pie, o1);

			pieChart.resize();
			pieChart.setOption(o1);
		}
	}

	function getSize(type) {
		var size = parseFloat(document.documentElement.style.fontSize);
		if(!size) return;
		var per = 0;
		switch(type) {
			case "legend":
			case "xAxisLabel":
			case "yAxisLabel":
			case "labelTitle":
				per = (14.33 / 0.75) / 91;
				break;
			case "grid_t":
				per = 60 / 91;
				break;
			case "grid_b":
				per = 56 / 91;
				break;
			case "grid_l":
				per = 804 * 0.15 / 91;
				break;
			case "grid_r":
				per = 804 * 0.07 / 91;
				break;
			case "legendItemWidth":
				per = 32 / 91;
				break;
			case "legendItemHeight":
				per = 20 / 91;
				break;
		}
		size = size * per;
		return size;
	}

	function _init(order) {
		setDom(order);
		setPie();
		changeBtnState($("[data-chart='"+ currentType +"']", currentPage));
		setLine(currentType, null);
		$(window).on("resize", _resize);
		setMyInterval();
	}

	function _reset() {
		clearInterval(interval);
		$(window).off("resize", _resize);
	}

	window.page7 = {
		init: _init,
		reset: _reset
	}
})();

//第一页开始
(function () {
    var chartOption = {
        pie: {
            title: {
                show: false
            },
            tooltip: {
                show: false
            },
            legend: {
                show: false
            },
            series: [
                {
                    type: "pie",
                    hoverAnimation: false,
                    center: ["50%", "50%"],
                    radius: ["85%", "95%"],
                    slient: true,
                    startAngle: 360,
                    label: {
                        normal: {
                            show: false,
                            position: "center"
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    }
                }
            ]
        },
        bar: {
            title: {
                show: false
            },
            tooltip: {
                show: true
            },
            legend: {
                show: false
            },
            grid: {
                left: getSize("grid_l"),
                right: getSize("grid_r"),
                top: getSize("grid_t"),
                bottom: getSize("grid_b")
            },
            xAxis: [
                {
                    type : "category",
                    axisLabel: {
                    	interval:0,
                        color: "#fff",
                        fontFamily: "",
                        fontSize: getSize("xAxisLabel")
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#498bfa"
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#1d40ab"
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type : "value",
                    axisLabel: {
                        color: "#fff",
                        fontFamily: "",
                        fontSize: getSize("yAxisLabel")
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#498bfa"
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#1d40ab"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#1a3aad"
                        }
                    }
                }
            ],
            series : [
                {
                    name: "进馆人数",
                    type: "bar",
                    barWidth: "36%",
                    itemStyle: {
                        normal: {
                            barBorderRadius: [8, 8, 0 ,0],
                             color: new echarts.graphic.LinearGradient(
                                0, 1, 0, 0,
                                [
                                    {offset: 0, color: "#0084df"},
                                    {offset: 1, color: "#17e7ff"}

                                ]
                            )
                        }
                    },
                    data:[]
                }
            ]
        }
    };

    var $pages = null,
    	currentPage = null,
    	pieChartMonthArr = [],
    	pieChartMonth = null,
    	pieChartYearArr = [],
    	pieChartYear = null,
    	barChartArr = [],
    	barChart = null,
    	numAnimArr = [],
    	numAnim = null;


    /**
	 * 设置饼图数据
	 * @param option [object] --- 需要传的系列数据，这里与后端真实数据对接，在稍微优化下即可
	 * 优化示例，仅供参考：
	 * 传入option参数如 
	 	{
	 		month: {
	 			beynod: true|false,
				// 正常数据-主圈
		 		normal: {
					series: [格式如下]
		 		},
		 		// 超出数据-次圈
		 		beynond: {
					series: [格式如下]
		 		}
	 		},
	 		year: {
	 			beyond: true|false,
				// 正常数据-主圈
		 		normal: {
					series: [格式如下]
		 		},
		 		// 超出数据-次圈
		 		beynond: {
					series: [格式如下]
		 		}
	 		}		
	    }
	 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	 *
	 *  情况1：没有超出的情况，比如本月进馆人数187，上月同期进馆人数520
	 *  
	 *  设置的系列数据为
	 *  beyond: false
	 *  data:[
             {
                value: 187,
                ...
            },
            {
                value: 520-187,
                ...
            }
        ]
     *  情况2：超出的情况，比如本月进馆人数670，上月同期进馆人数520
     *  设置的系列数据为
	 *  beyond: true
	 *  第一次系列数据
	 *  data:[
             {
                value: 520,
                ...
            }
        ]
        延迟系列数据
        data:[
             {
                value: 670-520,
                ...
            },
            {
                value: 520-(670-520),
                ...
            }
        ]
     */
    function setPie(option) {
    	pieChartMonth.clear();
	    pieChartMonth.setOption($.extend(true, {}, chartOption.pie, {
	        series:[
	            {
	                name: "本月进馆人数",
	                label: {
	                    normal: {
	                        formatter: function () {
	                            return "本月进馆人数\r\n26,666人";
	                        }
	                    }
	                },
	                itemStyle: {
	                    normal: {
	                        label: {show:false},
	                        labelLine: {show:false}
	                    }
	                },
	                data:[
	                     {
	                        value: 30000,
	                        name: "进馆人数",
	                        itemStyle:{
	                            normal:{
	                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	                                    {offset: 0, color: "#ff826d"},
	                                    {offset: 1, color: "#f1f96c"}
	                                ]),
	                                shadowBlur: 28,
	                                shadowColor: "rgba(255, 130, 81, 0.5)"
	                            }
	                        }
	                    },
	                    {
	                        value: 6235,
	                        name: "进馆人数",
	                        itemStyle: {
	                            normal : {
	                                color: "rgba(14,3,107,1)"
	                            }
	                        }
	                    }
	                ]
	            }
	        ]
	    }));

	    // 本月进馆人数-超出人数延迟加载
	    if (option.month.beyond === true) {
		    setTimeout(function () {
		         pieChartMonth.setOption({
		            series: [
		                {},{
		                    type: "pie",
		                    hoverAnimation: false,
		                    center: ["50%", "50%"],
		                    radius: ["85%", "95%"],
		                    slient: true,
		                    startAngle: 360,
		                    itemStyle: {
		                        normal: {
		                            label: {show:false},
		                            labelLine: {show:false}
		                        }
		                    },
		                    data:[
		                         {
		                            value: 4000,
		                            name: "超出人数",
		                            itemStyle:{
		                                normal:{
		                                    color: new echarts.graphic.LinearGradient(0.9, 0, 0.3, 0.3, [
		                                        {offset: 0, color: "#f8b86c"},
		                                        {offset: 0.6, color: "#fff"}
		                                    ]),
		                                    shadowBlur: 28,
		                                    shadowColor: "rgba(255, 130, 81, 0.5)"
		                                }
		                            }
		                        },
		                        {
		                            value: 30000,
		                            name: "超出人数",
		                            itemStyle: {
		                                normal : {
		                                    color: "rgba(14,3,107,0)",
		                                    opacity: 0
		                                }
		                            }
		                        }
		                    ]
		                }
		            ]
		        })
		    }, 2000);
		}

	    pieChartYear.clear();
	    pieChartYear.setOption($.extend(true, {}, chartOption.pie, {
	        series: [
	            {
	                name: "本年进馆人数",
	                label: {
	                    normal: {
	                        formatter: function () {
	                            return "本年进馆人数\r\n826,666人";
	                        }
	                    }
	                },
	                itemStyle: {
	                    normal: {
	                        label: {show:false},
	                        labelLine: {show:false}
	                    }
	                },
	                data:[
	                     {
	                        value: 30000,
	                        name: "进馆人数",
	                        itemStyle:{
	                            normal:{
	                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
	                                    {offset: 0, color: "#9f13ff"},
	                                    {offset: 1, color: "#1ae0fe"}
	                                ]),
	                                shadowBlur: 28,
	                                shadowColor: "rgba(101, 81, 255, 0.4)"
	                            }
	                        }
	                    }
	                ]
	            }
	        ]
	    }));

	    // 本年进馆人数-超出人数延迟加载
	    if (option.year.beyond === true) {
		    setTimeout(function () {
		         pieChartYear.setOption({
		            series: [
		                {},{
		                    type: "pie",
		                    hoverAnimation: false,
		                    center: ["50%", "50%"],
		                    radius: ["85%", "95%"],
		                    slient: true,
		                    startAngle: 360,
		                    itemStyle: {
		                        normal: {
		                            label: {show:false},
		                            labelLine: {show:false}
		                        }
		                    },
		                    data:[
		                         {
		                            value: 4000,
		                            name: "超出人数",
		                            itemStyle:{
		                                normal:{
		                                    color: new echarts.graphic.LinearGradient(0.9, 0, 0.3, 0.3, [
		                                        {offset: 0, color: "#5a72fe"},
		                                        {offset: 0.6, color: "#fff"}
		                                    ]),
		                                    shadowBlur: 28,
		                                    shadowColor: "rgba(101, 81, 255, 0.4)"
		                                }
		                            }
		                        },
		                        {
		                            value: 30000,
		                            name: "超出人数",
		                            itemStyle: {
		                                normal : {
		                                    color: "rgba(14,3,107,0)",
		                                    opacity: 0
		                                }
		                            }
		                        }
		                    ]
		                }
		            ]
		        })
		    }, 2000);
		}
    }

    var types = ["day", "week", "year"];
    var interval = null;
    var currentType = types[0];

    // 添加click事件，手动触发年周日切换   
    function addEvent() {
    	$pages.find("[data-chart]").on("click", function () {
	        var $this = $(this);
	        if ($this.is(".active")) return;

	        currentType = $this.attr("data-chart");
	        changeBtnState($this);
	        setBar(currentType);
	        setMyInterval();
	    });
    }

    // 更换按钮状态
    function changeBtnState(btn) {
    	btn.siblings(".active").removeClass("active");
        btn.addClass("active");	 		
    }

    // 添加定时器，轮播年周日图表
    function setMyInterval() {
        if (interval != null) {
            clearInterval(interval);
            interval = null;
        }
        interval = setInterval(function () {
            var index = $.inArray(currentType, types);
            if (index < types.length - 1) {
                currentType = types[++index]
            } else {
                currentType = types[0];
            }
            changeBtnState($("[data-chart='"+ currentType +"']", currentPage));
            setBar(currentType, null);
        }, 5000);
    }

    // 设置年周日图表
    function setBar(type, option) {
        barChart.clear();
        switch (type) {
            case "day":
                option = $.extend(true, {}, chartOption.bar, option || {
                    xAxis: [
                        {
                            data : ["9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"]
                        }
                    ],
                    series: [
                        {
                            data: [1120, 1000, 5500, 2500, 25000, 4000, 0, 0, 3000]
                        }
                    ]
                });
                break;
            case "week":
                option = $.extend(true, {}, chartOption.bar, option || {
                        xAxis: [
                            {
                                data : ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
                            }
                        ],
                        series: [
                            {
                                data: [6000, 10000, 6000, 5000, 1000, 4000, 4000]
                            }
                        ]
                    });
                break;
            case "year":
                option = $.extend(true, {}, chartOption.bar, option || {
                        xAxis: [
                            {
                                data : ["2011", "2012", "2013", "2014", "2015", "2016", "2017"]
                            }
                        ],
                        series: [
                            {
                                data: [6000, 10000, 6000, 5000, 1000, 4000, 4000]
                            }
                        ]
                    });
                break;
        }
        barChart.setOption(option);
    }

    var timeout = null;
    function _resize() {
    	if (!timeout) {
            clearTimeout(timeout);
            timeout = null;
        };
        timeout = setTimeout(setChartSize, 300);
    }

    function setChartSize() {
    	if (barChart) {
	        barChart.resize();
	        var o = {
	            xAxis: [{
	                axisLabel: {
	                    fontSize: getSize("xAxisLabel")
	                }
	            }],
	            yAxis: [{
	                axisLabel: {
	                    fontSize: getSize("yAxisLabel")
	                }
	            }],
	            grid: {
	                left: getSize("grid_l"),
	                right: getSize("grid_r"),
	                top: getSize("grid_t"),
	                bottom: getSize("grid_b")
	            }
	        };
	        $.extend(true, chartOption.bar, o);
	        barChart.setOption(o);
	    }

	    if (pieChartMonth) {
	        pieChartMonth.resize();
	    }
	    if (pieChartYear) {
	        pieChartYear.resize();
	    }
    }

    function getSize(type) {
        var size = parseFloat(document.documentElement.style.fontSize);
        if (!size) return;
        var per = 0;

        switch (type) {
            case "xAxisLabel":
            case "yAxisLabel":
                per = (14.33/0.75)/91;
                break;  
            case "grid_t":
                per = 60 / 91;    
                break;
            case "grid_b":
                per = 56 / 91;
                break;
            case "grid_l":
                per =  804 * 0.15 / 91; 
                break;
            case "grid_r":
                per = 804 * 0.07 / 91;
                break;
        }
        size = size * per;
        return size;    
    }

    // 进馆人数设置动效
    function setNumAnim() {
    	numAnim.reset();
    	if (!numAnim.error) {
	        numAnim.start();
	    } else {
	        console.error(numAnim.error);
	    }
    }

    function setDom(order) {

    	if (!$pages) {
    		$pages = $("[data-page='reader']");
    		addEvent();
		    $pages.each(function () {
		    	var $this = $(this);
		    	pieChartMonthArr.push(echarts.init($("#totalStatisticsChartMonth", $this).get(0)));
		    	pieChartYearArr.push(echarts.init($("#totalStatisticsChartYear", $this).get(0)));
		    	barChartArr.push(echarts.init($("#ywdStatisticsChart", $this).get(0)));
		    	numAnimArr.push(new CountUp($(".gradient-text-no", $this).get(0), 0, 2666, 0, 2, {
			        separator: ""
			    }));
		    });
    	}

    	switch (order) {
    		case "first":
    			currentPage = $pages.first();
    			pieChartMonth = pieChartMonthArr[0];
    			pieChartYear = pieChartYearArr[0];
    			barChart = barChartArr[0];
    			numAnim = numAnimArr[0];
    			break;
    		case "last":
    			currentPage = $pages.last();
    			pieChartMonth = pieChartMonthArr[1];
    			pieChartYear = pieChartYearArr[1];
    			barChart = barChartArr[1];
    			numAnim = numAnimArr[1];
    			break;
    	}
    }

    // 初始化
    function _init(order) {
    	setDom(order);
    	setPie({
    		month: { beyond: false }, 
    		year: { beyond: true }
    	});
    	setNumAnim();	    	
    	changeBtnState($("[data-chart='"+ currentType +"']", currentPage));
    	setBar(currentType, null);
    	$(window).on("resize", _resize);
        setMyInterval();
    }

    // 部分重置
    function _reset() {
    	clearInterval(interval);
    	$(window).off("resize", _resize);
    }

    window.page1 = {
    	init: _init,
    	reset: _reset
    }    
})();


//第一页结束

//第二页开始

(function () {
	var chartOption = {
		pie: {
			title: {
				show: true
			},
			tooltip: {
				show: false
			},
			legend: {
				show: false
			},
			series: [{
				type: "pie",
				hoverAnimation: false,
				center: ["50%", "50%"],
				radius: ["85%", "95%"],
				slient: true,
				startAngle: 360,
				label: {
					normal: {
						show: false,
						position: "center"
					},
					emphasis: {
						show: false
					}
				},
				labelLine: {
					normal: {
						show: false
					},
					emphasis: {
						show: false
					}
				}
			}]
		},
		bar: {
			title: {
				show: false
			},
			tooltip: {
				show: true
			},
			legend: {
				show: true,
				left: "7%",
				top: "3%",
				itemWidth: getSize("legendItemWidth"),
				itemHeight: getSize("legendItemHeight"),
				textStyle: {
					fontSize: getSize("legend")
				},
				data: [{
						name: "借书人数",
						textStyle: {
							color: "#17e7ff"
						}
					},
					{
						name: "还书人数",
						textStyle: {
							color: "#de4a74"
						}
					}
				]
			},
			grid: {
				left: getSize("grid_l"),
				right: getSize("grid_r"),
				top: getSize("grid_t"),
				bottom: getSize("grid_b")
			},
			xAxis: [{
				type: "category",
				axisLabel: {
					interval:0,
					color: "#fff",
					fontFamily: "",
					fontSize: getSize("xAxisLabel")
				},
				axisLine: {
					lineStyle: {
						color: "#498bfa"
					}
				},
				axisTick: {
					alignWithLabel: true,
					lineStyle: {
						color: "#1d40ab"
					}
				}
			}],
			yAxis: [{
				type: "value",
				axisLabel: {
					color: "#fff",
					fontFamily: "",
					fontSize: getSize("yAxisLabel")
				},
				axisLine: {
					lineStyle: {
						color: "#498bfa"
					}
				},
				axisTick: {
					alignWithLabel: true,
					lineStyle: {
						color: "#1d40ab"
					}
				},
				splitLine: {
					lineStyle: {
						color: "#1a3aad"
					}
				}
			}],
			series: [{
					name: "借书人数",
					type: "bar",
					barWidth: "36%",
					itemStyle: {
						normal: {
							barBorderRadius: [8, 8, 0, 0],
							color: new echarts.graphic.LinearGradient(
								0, 1, 0, 0, [{
										offset: 0,
										color: "#0084df"
									},
									{
										offset: 1,
										color: "#17e7ff"
									}

								]
							)
						}
					},
					data: []
				},
				{
					name: "还书人数",
					type: "line",
					smooth: true,
					showAllSymbol: true,
					symbol: "emptyCircle",
					symbolSize: getSize("symbolSize")
				}
			]
		}
	};

	var $page = $("[data-page='borrow']");
	var pieChartBorrow = echarts.init($("#totalStatisticsChartBorrow", $page).get(0));
	var pieChartReturn = echarts.init($("#totalStatisticsChartReturn", $page).get(0));

	function setPie(option) {
		pieChartBorrow.clear();
		pieChartBorrow.setOption($.extend(true, {}, chartOption.pie, {
			series: [{
				name: "今日借书人数",
				label: {
					normal: {
						formatter: function() {
							return "今日借书人数\r\n26,666人";
						}
					}
				},
				itemStyle: {
					normal: {
						label: {
							show: false
						},
						labelLine: {
							show: false
						}
					}
				},
				data: [{
						value: 30000,
						name: "借书人数",
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: "#d28df7"
									},
									{
										offset: 1,
										color: "#f2ea6d"
									}
								]),
								shadowBlur: 28,
								shadowColor: "rgba(255, 199, 219, 0.4)"
							}
						}
					},
					{
						value: 6235,
						name: "借书人数",
						itemStyle: {
							normal: {
								color: "rgba(14,3,107,1)"
							}
						}
					}
				]
			}]
		}));

		// 今日借书超出人数延迟加载
		if (option.borrowB.beyond === false) {
			setTimeout(function() {
				pieChartBorrow.setOption({
					series: [{}, {
						type: "pie",
						hoverAnimation: false,
						center: ["50%", "50%"],
						radius: ["85%", "95%"],
						slient: true,
						startAngle: 360,
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							}
						},
						data: [{
								value: 4000,
								name: "超出人数",
								itemStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(0.9, 0, 0.3, 0.3, [{
												offset: 0,
												color: "#e0b6ba"
											},
											{
												offset: 0.6,
												color: "#fff"
											}
										]),
										shadowBlur: 28,
										shadowColor: "rgba(255, 199, 219, 0.4)"
									}
								}
							},
							{
								value: 30000,
								name: "超出人数",
								itemStyle: {
									normal: {
										color: "rgba(14,3,107,0)",
										opacity: 0
									}
								}
							}
						]
					}]
				});
			}, 2000);
		}

		pieChartReturn.clear();
		pieChartReturn.setOption($.extend(true, {}, chartOption.pie, {
			series: [{
				name: "今日还书人数",
				label: {
					normal: {
						formatter: function() {
							return "今日还书人数\r\n826,666人";
						}
					}
				},
				itemStyle: {
					normal: {
						label: {
							show: false
						},
						labelLine: {
							show: false
						}
					}
				},
				data: [{
					value: 30000,
					name: "还书人数",
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0.3, 0, 1, [{
									offset: 0,
									color: "#7de26c"
								},
								{
									offset: 1,
									color: "#1de8fb"
								}
							]),
							shadowBlur: 28,
							shadowColor: "rgba(81, 224, 255, 0.4)"
						}
					}
				}]
			}]
		}));

		// 今日还书超出人数延迟加载
		if (option.returnB.beyond === true) {
			setTimeout(function() {
				pieChartReturn.setOption({
					series: [{}, {
						type: "pie",
						hoverAnimation: false,
						center: ["50%", "50%"],
						radius: ["85%", "95%"],
						slient: true,
						startAngle: 360,
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							}
						},
						data: [{
								value: 4000,
								name: "超出人数",
								itemStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(0.9, 0, 0.3, 0.3, [{
												offset: 0,
												color: "#61c9a9"
											},
											{
												offset: 0.6,
												color: "#fff"
											}
										]),
										shadowBlur: 28,
										shadowColor: "rgba(101, 81, 255, 0.5)"
									}
								}
							},
							{
								value: 30000,
								name: "超出人数",
								itemStyle: {
									normal: {
										color: "rgba(14,3,107,0)",
										opacity: 0
									}
								}
							}
						]
					}]
				});
			}, 2000);
		}
	}

	var barChart = echarts.init($("#ywdStatisticsChart", $page).get(0));
	var types = ["day", "week", "year"];
	var interval = null;
	var currentType = types[0];

	// 添加click事件，手动触发年周日切换
	$page.find("[data-chart]").on("click", function() {
		var $this = $(this);
		if($this.is(".active")) return;

		currentType = $this.attr("data-chart");
		changeBtnState($this);
		setBar(currentType);
		setMyInterval();
	});

	// 更换按钮状态
	function changeBtnState(btn) {
		btn.siblings(".active").removeClass("active");
		btn.addClass("active");
	}

	// 添加定时器，轮播年周日图表
	function setMyInterval() {
		if(interval != null) {
			clearInterval(interval);
			interval = null;
		}
		interval = setInterval(function() {
			var index = $.inArray(currentType, types);
			if(index < types.length - 1) {
				currentType = types[++index];
			} else {
				currentType = types[0];
			}
			changeBtnState($("[data-chart='" + currentType + "']", $page));
			setBar(currentType);
		}, 5000);
	}

	// 设置年周日图表
	function setBar(type, option) {
		barChart.clear();
		switch(type) {
			case "day":
				option = $.extend(true, {}, chartOption.bar, option || {
					xAxis: [{
						data: ["9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"]
					}],
					series: [{
							data: [1120, 1000, 5500, 2500, 2500, 4000, 0, 0, 3000]
						},
						{
							data: [5620, 12000, 6650, 6000, 2600, 5000, 6000, 7020, 3800]
						}
					]
				});
				break;
			case "week":
				option = $.extend(true, {}, chartOption.bar, option || {
					xAxis: [{
						data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
					}],
					series: [{
							data: [6000, 10000, 6000, 5000, 1000, 4000, 4000]
						},
						{
							data: [6000, 10000, 6000, 5000, 1000, 4000, 4000]
						}
					]
				});
				break;
			case "year":
				option = $.extend(true, {}, chartOption.bar, option || {
					xAxis: [{
						data: ["2011", "2012", "2013", "2014", "2015", "2016", "2017"]
					}],
					series: [{
							data: [6000, 10000, 6000, 5000, 1000, 4000, 4000]
						},
						{
							data: [6000, 10000, 6000, 5000, 1000, 4000, 4000]
						}
					]
				});
				break;
		}
		barChart.setOption(option);
	}

	var timeout = null;
	function _resize() {
		if(!timeout) {
			clearTimeout(timeout);
			timeout = null;
		};
		timeout = setTimeout(setChartSize, 300);
	}

	function setChartSize() {
		if (barChart) {
			barChart.resize();
			var o = {
				xAxis: [{
					axisLabel: {
						fontSize: getSize("xAxisLabel")
					}
				}],
				yAxis: [{
					axisLabel: {
						fontSize: getSize("yAxisLabel")
					}
				}],
				grid: {
					left: getSize("grid_l"),
					right: getSize("grid_r"),
					top: getSize("grid_t"),
					bottom: getSize("grid_b")
				},
				legend: {
					itemWidth: getSize("legendItemWidth"),
					itemHeight: getSize("legendItemHeight"),
					textStyle: {
						fontSize: getSize("legend")
					}
				},
				series: [{}, {
					symbolSize: getSize("symbolSize")
				}]
			};
			$.extend(true, chartOption.bar, o);
			barChart.setOption(o);
		}

		if (pieChartBorrow) {
			pieChartBorrow.resize();
		}

		if (pieChartReturn) {
			pieChartReturn.resize();
		}
	}

	function getSize(type) {
		var size = parseFloat(document.documentElement.style.fontSize);
		if(!size) return;
		var per = 0;

		switch(type) {
			case "legend":
			case "xAxisLabel":
			case "yAxisLabel":
				per = (14.33 / 0.75) / 91;
				break;
			case "grid_t":
				per = 60 / 91;
				break;
			case "grid_b":
				per = 56 / 91;
				break;
			case "grid_l":
				per = 804 * 0.15 / 91;
				break;
			case "grid_r":
				per = 804 * 0.07 / 91;
				break;
			case "symbolSize":
				per = 15 / 91;
				break;
			case "legendItemWidth":
				per = 32 / 91;
				break;
			case "legendItemHeight":
				per = 20 / 91;
				break;
		}
		size = size * per;
		return size;
	}

	function _init() {
		setPie({
			borrowB: { beyond: false },
			returnB: { beyond: true }
		});
		changeBtnState($("[data-chart='data-borrow']", $page));
		setBar(currentType, null);
		$(window).on("resize", _resize);
		setMyInterval();
	}

	function _reset() {
		clearInterval(interval);
		$(window).off("resize", _resize);
	}

	window.page2 = {
		init: _init,
		reset: _reset
	}
})();
//第二页结束
//第三页开始
function page3() {
	$(".number1").countTo({
		lastSymbol: "", //显示在最后的字符
		from: 0, // 开始时的数字
		speed: 1500 // 总时间
//		refreshInterval: 10, // 刷新一次的时间
	});

	$(".number2").countTo({
		lastSymbol: "", //显示在最后的字符
		from: 100000, // 开始时的数字
		speed: 1500 // 总时间
//		refreshInterval: 10, // 刷新一次的时间
	});
};

//第三页结束
//第四页开始
var timer1;
function page4() {
	slide($('.sect li.center'), 'ani-slideInLeft');
	setTimeout(function() {
		slide($('.sect li.right'), 'ani-slideInRight');
		slide($('.sect li.left'), 'ani-slideInLeft');
	}, 150);

	shake(4000);

	function slide(ele, className) {
		ele.each(function(index, item) {
			if(index > 0) {
				setTimeout(function() {
					$(item).addClass(className);
				}, index * 150);
			} else {
				$(item).addClass(className);
			}

			animateEnd($(this), function() {
				$(item).removeClass(className);
				$(item).css({
					'opacity': 1
				});
			});

		});

	}

	function animateEnd(ele, fn) {
		ele.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
			fn && fn();
		});
	}

	function shake(interval) {
		var className = 'ani-pulse';
		timer1 = setInterval(function() {
			$('.sect li').each(function(index, t) {
				setTimeout(function() {
					$(t).addClass(className);

					animateEnd($(t), function() {
						$(t).removeClass(className);
					})
				}, 80 * index);
			})
		}, interval)
	}
}
//第四页结束
//第五页开始

//第五页结束
//第七页结束
$(document).ready(function() {
	var active = true;
	var mySwiper = new Swiper('.swiper-container1', {
		autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false
        },
		loop: true,
		on: {
			slideChangeTransitionStart: function() {
				switch(this.activeIndex) {
					case 0:
						page1.reset();
						page7.init("first");
						break;
					case 1:
						page1.init("first");
						break;
					case 2:
						page1.reset();
						page2.init();
						clearInterval(timer1);
						break;
					case 3:
						page2.reset();
						page3();
						break;
					case 4:
						page4();
						break;
					case 5:
					clearInterval(timer1);
						break;
					case 6:
						$('.gallery-thumbs').css({"width":"300%"});
						break;
					case 7:
					$('.gallery-thumbs').css({"width":"100%"});
						page7.init("last");
						break;
					case 8:
						page7.reset();
						page1.init("last");
					break;
				}
			}
		}
	});
})